Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(Combobox): Improve performance #1771

Merged
merged 53 commits into from
May 13, 2024
Merged

fix(Combobox): Improve performance #1771

merged 53 commits into from
May 13, 2024

Conversation

Barsnes
Copy link
Member

@Barsnes Barsnes commented Apr 8, 2024 •
edited
Loading

This is not done, but it has boosted performance. We still need to investigate how we can make the first render fater.
Subsequent renders are behaving better, though.

resolves #1765
resolves #1516

See the "thousand of options" story, which has virtualization enabled. You can try disabling this as well.

  • Combined the calculation of optionsChildren and customIds - These both ran Children.toArray.
  • Added lookup for selectedValues to remove the use of .some().
  • Made options and selectedOptions an object, so we can look up with keys.
  • activeDescendant is now set by floating-ui's list navigation.
  • floating-ui now handles changing activeIndex when using arrow keys.
  • Added a higher context for activeIndex, since this was causing a re-render of everything when it changed.
  • Virtualization does not re-render everything on scroll anymore.
  • Added a missing test for pressing Enter on an item.
  • Added more hook to separate concerns.
  • Tweaked how we do filtering
  • Resolves Selected Options Not Cleared in Combobox When Options List Becomes Empty #1860
    • Fixed by updating options checks to equal or greater than 0
  • Removed deprecated prop cleanButtonLabel
  • Remove focus state from ComboboxInput, solve this with css
  • Rework how value changing works, remove effect, everything now runs through one function

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 8, 2024 •
edited
Loading

Preview deployments for this pull request:

📖 Storybook 8. May 2024 - 14:55 (Norwegian time)

See all deployments at https://dev.designsystemet.no

@Barsnes Barsnes changed the title Test fix/combobox fix(Combobox): Re-renders Apr 8, 2024
@Barsnes Barsnes changed the title fix(Combobox): Re-renders fix(Combobox): Render optimization Apr 9, 2024
@Barsnes Barsnes marked this pull request as ready for review April 9, 2024 12:47
@Barsnes Barsnes requested a review from mimarz as a code owner April 9, 2024 12:47
@Barsnes Barsnes marked this pull request as draft April 10, 2024 06:22
@Barsnes Barsnes marked this pull request as ready for review April 10, 2024 10:07
@mimarz mimarz mentioned this pull request Apr 18, 2024
Closed
@Barsnes Barsnes changed the title fix(Combobox): Render optimization fix(Combobox): render optimization Apr 22, 2024
Barsnes and others added 21 commits April 23, 2024 12:24
@mimarz mimarz mentioned this pull request Apr 26, 2024
Closed
@mimarz
Copy link
Collaborator

mimarz commented May 7, 2024

Note to self, found a bug with multiple select where closing dropdown with ESC key and typing again, no dropdown showed up in accordance with search value.

mimarz
mimarz approved these changes May 13, 2024
View reviewed changes
Copy link
Collaborator

@mimarz mimarz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't looked to close at the code but functionality wise it seems to work the same as before, only faster.

Lets get this out so people can test :)

I found some visual bugs, but I expect us to fix the css layer order right after merging this.

image

@Barsnes Barsnes changed the title fix(Combobox): render optimization fix(Combobox): Improve performance May 13, 2024
@Barsnes Barsnes merged commit 18cdd17 into main May 13, 2024
5 checks passed
@Barsnes Barsnes deleted the test-fix/combobox branch May 13, 2024 08:53
@github-actions github-actions bot mentioned this pull request Jul 26, 2024
Merged
mimarz pushed a commit that referenced this pull request Jul 26, 2024
@github-actions
Version Packages (next) (#2186)
a7cf236 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to next, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`next` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `next`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @digdir/[email protected]

### Patch Changes

-
[`2d1da9a`](2d1da9a)
Thanks [@mimarz](https://github.com/mimarz)! - Testing snapshot release

All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit
guidelines.

# 0.1.0-alpha.6 (2024-06-11)

### Features

- 🎨 V1 Release candidate
([#1849](#1849))
([917ac1f](917ac1f))

## @digdir/[email protected]

### Patch Changes

-
[`2d1da9a`](2d1da9a)
Thanks [@mimarz](https://github.com/mimarz)! - Testing snapshot release

All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit
guidelines.

#
[0.11.0-alpha.2](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected])
(2024-06-11)

### Features

- 🎨 V1 Release candidate
([#1849](#1849))
([917ac1f](917ac1f))

### Reverts

- Revert "Publish"
([8b3c1a1](8b3c1a1))

#
[0.10.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected])
(2024-06-07)

### Bug Fixes

- **Heading:** ⚰️ Remove non-working `3xlarge`/`3xl` size
([#2074](#2074))
([dad4c8e](dad4c8e))

### Features

- **css:** use native selectors
([#2050](#2050))
([f1747b0](f1747b0))

#
[0.9.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected])
(2024-05-24)

### Bug Fixes

- **Combobox:** remove wrong padding
([#2067](#2067))
([0a60499](0a60499))
- **RadioGroup:** bigger horizontal gap between inputs
([#2068](#2068))
([c9818ec](c9818ec))
- **Tabs:** active tab has wrong hover style
([#2061](#2061))
([104e16d](104e16d))

### Features

- **Alert:** add shorthand sizes
([#1995](#1995))
([868d214](868d214))
- **Box:** add shorthand sizes
([#2048](#2048))
([05901c0](05901c0))
- **Checkbox:** add shorthand sizes
([#2030](#2030))
([e2ca09d](e2ca09d))
- **Chips:** add shorthand sizes
([#2007](#2007))
([318d1ee](318d1ee))
- **Combobox:** add shorthand sizes
([#2029](#2029))
([f1ef9fe](f1ef9fe))
- **DropdownMenu:** add shorthand sizes
([#2021](#2021))
([cf17310](cf17310))
- **ErrorMessage:** add shorthand sizes
([#2019](#2019))
([c511c59](c511c59))
- **Heading:** add shorthand sizes
([#1997](#1997))
([265a3c7](265a3c7))
- **HelpText:** add shorthand sizes
([#2014](#2014))
([ad97311](ad97311))
- **Ingress:** add shorthand sizes
([#2020](#2020))
([62caef5](62caef5))
- **Label:** add shorthand sizes
([#1999](#1999))
([919c43c](919c43c))
- **NativeSelect:** add shorthand sizes
([#2033](#2033))
([1d494d1](1d494d1))
- **Pagination:** add shorthand sizes
([#2034](#2034))
([1c549b7](1c549b7))
- **Paragraph:** add shorthand sizes
([#1996](#1996))
([72a7824](72a7824))
- **Popover:** add shorthand sizes
([#2006](#2006))
([6637c52](6637c52))
- **Radio:** add shorthand sizes
([#2036](#2036))
([20278fa](20278fa))
- **Search:** add shorthand sizes
([#2028](#2028))
([d8fc81d](d8fc81d))
- **Switch:** add shorthand sizes
([#2027](#2027))
([bd5160b](bd5160b))
- **Table:** add shorthand sizes
([#2016](#2016))
([50cbb8e](50cbb8e))
- **Tabs:** add shorthand sizes
([#2012](#2012))
([806125d](806125d))
- **Tag:** add shorthand sizes
([#2017](#2017))
([405f55d](405f55d))
- **Textarea:** add shorthand sizes
([#2031](#2031))
([5932d5e](5932d5e))
- **Textfield:** add shorthand sizes
([#2018](#2018))
([9c52938](9c52938))

#
[0.8.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected])
(2024-05-16)

### Features

- **Button:** add shorthand sizes
([#1986](#1986))
([38a5232](38a5232))

#
[0.7.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected])
(2024-05-14)

### Bug Fixes

- **Combobox:** Improve performance
([#1771](#1771))
([18cdd17](18cdd17))
- **Modal:** fix close button position
([#1877](#1877))
([c866710](c866710))

### Features

- **Button:** 💄 Add top & bottom padding
([#1910](#1910))
([efd0582](efd0582))

## @digdir/[email protected]

### Patch Changes

-
[`2d1da9a`](2d1da9a)
Thanks [@mimarz](https://github.com/mimarz)! - Testing snapshot release

- [#2184](#2184)
[`8b2abdb`](8b2abdb)
Thanks [@mimarz](https://github.com/mimarz)! - fix(Combobox): 🐛
Button for toggling open/close should now close when open

- [#2185](#2185)
[`567329b`](567329b)
Thanks [@mimarz](https://github.com/mimarz)! - feat(Combobox):
:sparkles: Label now supports other elements

All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit
guidelines.

#
[1.0.0-rc.6](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected])
(2024-06-11)

### Bug Fixes

- **Tab:** Use correct type on Tab button
([f3f5949](f3f5949))

### Features

- 🎨 V1 Release candidate
([#1849](#1849))
([917ac1f](917ac1f))

### Reverts

- Revert "Publish"
([8b3c1a1](8b3c1a1))

#
[0.63.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected])
(2024-06-07)

### Bug Fixes

- **Combobox:** make value as string of integer work
([#2095](#2095))
([0a687f2](0a687f2)),
closes [#2081](#2081)
[#2106](#2106)
- **Heading:** ⚰️ Remove non-working `3xlarge`/`3xl` size
([#2074](#2074))
([dad4c8e](dad4c8e))

### Features

- **css:** use native selectors
([#2050](#2050))
([f1747b0](f1747b0))

#
[0.62.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected])
(2024-05-24)

### Bug Fixes

- **Tabs:** `className` being overridden
([#2064](#2064))
([10fb504](10fb504))
- **Tabs:** active tab has wrong hover style
([#2061](#2061))
([104e16d](104e16d))
- **Textfield:** character counter inital value
([#2056](#2056))
([7b5df7f](7b5df7f))
- **Tooltip:** rendered in a portal by default
([#2060](#2060))
([95960f7](95960f7))

### Features

- **Alert:** add shorthand sizes
([#1995](#1995))
([868d214](868d214))
- **Box:** add shorthand sizes
([#2048](#2048))
([05901c0](05901c0))
- **Checkbox:** add shorthand sizes
([#2030](#2030))
([e2ca09d](e2ca09d))
- **Chips:** add shorthand sizes
([#2007](#2007))
([318d1ee](318d1ee))
- **Combobox:** add shorthand sizes
([#2029](#2029))
([f1ef9fe](f1ef9fe))
- **DropdownMenu:** add shorthand sizes
([#2021](#2021))
([cf17310](cf17310))
- **ErrorMessage:** add shorthand sizes
([#2019](#2019))
([c511c59](c511c59))
- **Heading:** add shorthand sizes
([#1997](#1997))
([265a3c7](265a3c7))
- **HelpText:** add shorthand sizes
([#2014](#2014))
([ad97311](ad97311))
- **Ingress:** add shorthand sizes
([#2020](#2020))
([62caef5](62caef5))
- **Label:** add shorthand sizes
([#1999](#1999))
([919c43c](919c43c))
- **List:** add shorthand sizes
([#2009](#2009))
([7f694e0](7f694e0))
- **NativeSelect:** add shorthand sizes
([#2033](#2033))
([1d494d1](1d494d1))
- **Pagination:** add shorthand sizes
([#2034](#2034))
([1c549b7](1c549b7))
- **Paragraph:** add shorthand sizes
([#1996](#1996))
([72a7824](72a7824))
- **Popover:** add shorthand sizes
([#2006](#2006))
([6637c52](6637c52))
- **Radio:** add shorthand sizes
([#2036](#2036))
([20278fa](20278fa))
- **Search:** add shorthand sizes
([#2028](#2028))
([d8fc81d](d8fc81d))
- **Spinner:** add shorthand sizes
([#2000](#2000))
([b18eb98](b18eb98))
- **Switch:** add shorthand sizes
([#2027](#2027))
([bd5160b](bd5160b))
- **Table:** add shorthand sizes
([#2016](#2016))
([50cbb8e](50cbb8e))
- **Tabs:** add shorthand sizes
([#2012](#2012))
([806125d](806125d))
- **Tag:** add shorthand sizes
([#2017](#2017))
([405f55d](405f55d))
- **Textarea:** add shorthand sizes
([#2031](#2031))
([5932d5e](5932d5e))
- **Textfield:** add shorthand sizes
([#2018](#2018))
([9c52938](9c52938))
- **ToggleGroup:** add shorthand sizes
([#2011](#2011))
([44f9abd](44f9abd))

#
[0.61.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected])
(2024-05-16)

### Bug Fixes

- **Combobox:** Show all options in single mode when a value is selected
([#1983](#1983))
([ac82b50](ac82b50))

### Features

- **Button:** add shorthand sizes
([#1986](#1986))
([38a5232](38a5232))

#
[0.60.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected])
(2024-05-14)

### Bug Fixes

- **Combobox:** Improve performance
([#1771](#1771))
([18cdd17](18cdd17))
- **Modal:** fix close button position
([#1877](#1877))
([c866710](c866710))

### Features

- **Box:** Remove deprecated `as` prop
([#1896](#1896))
([59dd231](59dd231))
- **Button:** Remove deprecated `as` prop
([#1894](#1894))
([c346203](c346203))
- **Card:** Remove deprecated `as` prop
([#1897](#1897))
([17ef8c6](17ef8c6))
- **DropdownMenuItem:** Remove deprecated `as` prop
([#1895](#1895))
([2f705bb](2f705bb))
- **ErrorMessage:** Remove deprecated `as` prop
([#1899](#1899))
([b37584a](b37584a))
- **Heading:** Remove deprecated `as` prop
([#1900](#1900))
([685e438](685e438))
- **Ingress:** Remove deprecated `as` prop
([#1903](#1903))
([1139b31](1139b31))
- **Label:** Remove deprecated `as` prop
([#1904](#1904))
([a1469e4](a1469e4))
- **Link:** Remove deprecated `as` prop
([#1898](#1898))
([f037bd2](f037bd2))
- **Paragraph:** Remove deprecated `as` prop
([#1905](#1905))
([aa81f5a](aa81f5a))
- **Paragraph:** Remove deprectated `short` prop
([#1891](#1891))
([e1213b0](e1213b0))

## @digdir/[email protected]

### Patch Changes

-
[`2d1da9a`](2d1da9a)
Thanks [@mimarz](https://github.com/mimarz)! - Testing snapshot release

All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit
guidelines.

#
[1.0.0-rc.6](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected])
(2024-06-11)

### Features

- 🎨 V1 Release candidate
([#1849](#1849))
([917ac1f](917ac1f))

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mimarz mimarz mimarz approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@Barsnes @mimarz